<%@ page contentType="text/html;charset=UTF-8" %>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="layout" content="template">
</head>
<body>

<g:javascript>
  function search() {
    var searchString = jq("#searchString").val();
    var pageSize = jq("#pageSize").val();
    ${remoteFunction(action: 'search', update: 'searchResults', params: "'searchString='+searchString+'&max='+pageSize+'&offset=0'")};
  }

  jq(document).ready(function () {
    jq("#findHotels").click(function () {
      search();
    });

    jq("#searchString").keyup(function () {
      search();
    });
  });
</g:javascript>

<div class="section">

  <g:include template="/messages" />

  <h1>Search Hotels</h1>
  <fieldset>
    <input type="text" id="searchString" name="searchString" value="${session.searchString}" style="width:165px;"/>
    &#160;
    <input type="button" id="findHotels" value="Find Hotels"/>
    &#160;
    <span id="spinner" class="spinner" style="display:none;">
      <img src="${createLinkTo(dir: 'images', file: 'spinner.gif')}" alt="Spinner"/>
    </span>
    <br/>
    <label>Maximum results:</label>&#160;
  <g:select id="pageSize" name="pageSize" from="${[5, 10, 15]}" value="${params.pageSize}"/>
  </fieldset>
</div>

<div class="section">
  <span id="searchResults">
    <g:include template="searchResults" />
  </span>
</div>


<div class="section">
  <h1>Current Hotel Bookings</h1>
</div>

<div class="section">
  <g:if test="${!bookings}">
    No Bookings Found
  </g:if>
  <g:else>
    <table>
      <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Address</th>
        <th scope="col">City, State</th>
        <th scope="col">Check in date</th>
        <th scope="col">Check out date</th>
        <th scope="col">NO.</th>
        <th>Action</th>
      </tr>
      </thead>

      <tbody>
      <g:each in="${bookings}" var="booking">
        <tr>
          <td>${booking.hotel.name}</td>
          <td>${booking.hotel.address}</td>
          <td>${booking.hotel.city}, ${booking.hotel.state}</td>
          <td><g:formatDate date="${booking.checkinDate}" format="dd/MM/yyyy"/></td>
          <td><g:formatDate date="${booking.checkoutDate}" format="dd/MM/yyyy"/></td>
          <td>${booking.id}</td>
          <td>
            <g:link controller="booking" action="cancel" id="${booking.id}">Cancel</g:link>
          </td>
        </tr>
      </g:each>
      </tbody>
    </table>
  </g:else>
</div>

</body>
</html>
